<!DOCTYPE html>
<html>

<head>
    <title data-i18n="welcome_page_title"></title>
    <meta charset="utf-8" />
    <link rel="shortcut icon" type="image/png" href="./icon128.png" />
    <style>
        body {
            background-color: black;
            font-size: 15px;
        }

        #container {
            height: 100%;
            margin-left: auto;
            margin-right: auto;
            width: 75%;
            position: relative;
            font-family: Arial;
            padding-top: 15px;
        }

        #welcome {
            position: relative;
            left: 50%;
            transform: translate(-50%, 0%);
            display: inline-block;
            font-size: 40px;

        }

        .box {
            background-color: rgb(27, 27, 27);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 2px;
            color: rgba(255, 255, 255, 0.8);
            padding: 10px 20px;
        }

        .center {
            text-align: center;
        }

        a {
            color: rgb(0, 200, 255);
        }

        code { /* bluish box */
            display: inline-block;
            background-color: rgba(0, 200, 255, 0.5);
            border-radius: 2px;
            padding: 0 5px;
        }

        .keyboard-image {
            width: 100%;
        }
    </style>
</head>

<body>

    <div id="container">

        <div id="welcome" class="box" data-i18n="welcome_page_title"></div>

        <div class="box" style="margin-top: 20px">
            <h2 id="usage" data-i18n="welcome_page_usage_header"></h2>

            <p data-i18n="welcome_page_usage_content0"></p>

            <ol>
                <li data-i18n="welcome_page_usage_content1"></li>
                <li data-i18n="welcome_page_usage_content2"></li>
                <li data-i18n="welcome_page_usage_content3"></li>
                <li data-i18n="welcome_page_usage_content4"></li>
            </ol>

            <p data-i18n="welcome_page_usage_end"></p>

            <a href="https://github.com/Andrews54757/FastStream/issues">Bug Tracker</a>

            <h3 id="keyboardcontrols" data-i18n="welcome_page_keybinds_header"></h3>
            <p data-i18n="welcome_page_keybinds_content0"></p>
            <ul>
                <li><code>Left/Right</code> <span data-i18n="welcome_page_keybinds_content1"></span></li>

                <li><code>&lt;/&gt;</code> <span data-i18n="welcome_page_keybinds_content2"></span></li>

                <li><code>z</code> <span data-i18n="welcome_page_keybinds_content3"></span></li>

                <li><code>Up/Down</code> <span data-i18n="welcome_page_keybinds_content4"></span></li>

                <li><code>f</code> <span data-i18n="welcome_page_keybinds_content5"></span></li>

                <li><code>+/-</code> <span data-i18n="welcome_page_keybinds_content6"></span></li>

                <li><code>~</code> <span data-i18n="welcome_page_keybinds_content7"></span></li>

                <li><code>s</code> <span data-i18n="welcome_page_keybinds_content8"></span></li>

                <li><code>Right Alt</code> <span data-i18n="welcome_page_keybinds_content9"></span></li>
            </ul>
            <img src="keyboard.png" class="keyboard-image">

        </div>
        <div class="center" style="font-size: 8px;color: rgba(255, 255, 255, 0.4)">Copyright © 2017-2024 Andrew S
            (Andrews54757@gmail.com)</div>
    </div>
    <script src="./player/i18n.mjs" charset="UTF-8" type="module"></script>
</body>

</html>